import { useUserStore } from "@/store/modules/user";
import { App, Directive, DirectiveBinding } from "vue";
import { checkRole, USER_ROLES } from "@/utils/sys/permission";

/**
 * 角色权限指令
 *
 * 支持多种用法：
 * 1. 单个角色：<el-button v-roles="'admin'">管理员按钮</el-button>
 * 2. 多个角色（OR逻辑）：<el-button v-roles="['admin', 'wms_admin']">按钮</el-button>
 * 3. 使用常量：<el-button v-roles="USER_ROLES.WMS_ADMIN">按钮</el-button>
 *
 * 只要用户角色包含指令值中的任意一个角色，则显示元素
 * 支持WMS专用角色常量和超级管理员权限
 */

interface RolesBinding extends DirectiveBinding {
  value: string | string[];
}

function checkRolePermission(el: HTMLElement, binding: RolesBinding): void {
  const { value } = binding;

  if (!value) {
    console.warn("v-roles 指令缺少角色值");
    removeElement(el);
    return;
  }

  // 使用统一的角色检查函数
  if (checkRole(value)) {
    return;
  }

  // 没有权限，移除元素
  removeElement(el);
}

/**
 * 安全地移除DOM元素
 * @param el 要移除的元素
 */
function removeElement(el: HTMLElement): void {
  try {
    if (el.parentNode) {
      el.parentNode.removeChild(el);
    }
  } catch (error) {
    console.error("移除元素时发生错误:", error);
  }
}

const rolesDirective: Directive = {
  mounted: checkRolePermission,
  updated: checkRolePermission,
};

export function setupRolesDirective(app: App): void {
  app.directive("roles", rolesDirective);
}

// 导出常量供模板使用
export { USER_ROLES };
